export var CommentInput = function (args: any) {

    // 1.获取是否有评论数据
    var currentBody = args.annotation ? args.annotation.bodies.find((item: any) => item.purpose == 'comment') : null

    // 2.获取评论数据的值
    var currentValue = currentBody ? currentBody.value : null

    // 3.输入值改变立刻同步
    var changeComment = (event: any) => {
        currentValue = event.target.value
        if (currentBody) {
            args.onUpdateBody(currentBody, {
                type   : 'comment',
                purpose: 'comment',
                value  : currentValue
            })
        }
        else {
            args.onAppendBody({
                type   : 'comment',
                purpose: 'comment',
                value  : currentValue
            })
        }
    }

    // 输入框,一旦发生改变,立刻同步数据
    var span         = document.createElement("span")
    span.innerHTML   = "评论:"
    span.style.width = "20%"

    // 输入框,一旦发生改变,立刻同步数据
    var commentInput         = document.createElement('input')
    commentInput.value       = currentValue || ""
    commentInput.style.width = "70%"
    commentInput.addEventListener('change', changeComment)

    // 创建元素
    var container           = document.createElement('div')
    container.style.padding = "10px"
    container.style.display = "flex"

    container.appendChild(span)
    container.appendChild(commentInput)

    return container
}
